<template>
  <div class="lis-zk-zkt z-col">
    <!-- 筛选条件 -->
    <el-form :inline="true" :model="formData" class="demo-form-inline">
      <el-form-item label="区间">
        <el-date-picker v-model="formData.kssj" format="YYYY/MM/DD" value-format="YYYY/MM/DD" />
        <span class="text-gray-500 text-center">-</span>
        <el-date-picker v-model="formData.jssj" format="YYYY/MM/DD" value-format="YYYY/MM/DD" />
      </el-form-item>
      <el-form-item label="仪器">
        <el-select v-model="formData.yqid">
          <el-option v-for="it in yqList" :key="it.id" :label="it.yqmc" :value="it.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-radio-group v-model="formData.ph">
          <!-- <el-radio value="3">单批号</el-radio> -->
          <el-radio value="6">不分批号</el-radio>
          <!-- <el-radio value="9">多批号</el-radio> -->
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <!-- <el-checkbox label="显示所有批号" value="1" v-model="formData.xssyph" /> -->
        <!-- <el-checkbox label="多图" value="1" v-model="formData.dt" />
        <el-checkbox label="显示非累计点" value="1" v-model="formData.xsfljd" />
        <el-checkbox label="直接打印" value="1" v-model="formData.dy" /> -->
      </el-form-item>
      <el-form-item>
        <!-- <el-radio-group v-model="formData.dw">
          <el-radio value="3">所有点</el-radio>
          <el-radio value="6">最后点</el-radio>
          <el-radio value="9">最好点</el-radio>
        </el-radio-group> -->
      </el-form-item>
      <el-form-item>
        <!-- <el-checkbox value="1" v-model="formData.sp1">水平1</el-checkbox>
        <el-checkbox value="1" v-model="formData.sp2">水平2</el-checkbox>
        <el-checkbox value="1" v-model="formData.sp3">水平3</el-checkbox> -->
      </el-form-item>
    </el-form>
    <z-block class="z-row content">
      <!-- 左侧列表 -->
      <div class="left">
        <el-table
          class="tableClass"
          max-height="3rem"
          size="small"
          stripe
          :data="tableList"
          v-loading="tableLoading"
          highlight-current-row
          @row-click="tableClick"
        >
          <el-table-column prop="zbmc" width="130" align="center" />
          <el-table-column prop="tdm" width="60" header-align="center" />
        </el-table>
      </div>
      <!-- 图形绘制区域 -->
      <!-- 图形切换 -->
      <el-tabs modelValue="图形" class="z-col right">
        <el-tab-pane v-for="it in tabTitle" :key="it.title" :label="it.title" :name="it.title">
          <component :is="loadComponent(it.id)" :data="zksj" :param="zkParam" :zkbz="zkbz" />
        </el-tab-pane>
      </el-tabs>
      <!-- 图形绘制区域 -->
    </z-block>
  </div>
</template>
<script lang="ts" setup>
import { use } from './use'
defineOptions({
  name: 'lis-zk-zkt'
})
const {
  formData,
  tableList,
  tableLoading,
  tabTitle,
  yqList,
  tableClick,
  loadComponent,
  zkParam,
  zksj,
  zkbz
} = use()
</script>
<style lang="scss">
.lis-zk-zkt {
  flex-grow: 1;
  padding-top: 0.05rem;
  > .content {
    border-top: 1px solid var(--color-border-1);
    width: 100%;
    > .left,
    > .right {
      height: 100%;
    }
    > .left {
      max-width: 3rem;
      border-right: 1px solid var(--color-border-1);
    }
    > .el-tabs {
      width: 100%;
      height: 100%;
      overflow: hidden;
      flex-basis: 0;
      flex-grow: 1;
      .el-tabs__header {
        width: 100%;
        margin-bottom: 0.08rem;
      }
      .el-tabs__content {
        width: 100%;
        flex-grow: 1;
        flex-basis: 0;
      }
      .el-tab-pane {
        height: 100%;
      }
      .el-tabs__item {
        height: 0.3rem;
      }
      .el-tabs__nav {
        padding: 0 0.1rem;
      }
    }
  }
}
</style>
